<template>
	<div class="layout-pd">
		<el-card shadow="hover" header="滚动通知栏">
			<NoticeBar
				text="🎉🎉🔥请用户根据自己参与的实验,选择正确的实验信息和教师信息,上传实验报告(实验报告的格式限制为.pdf,.doc.docx),并等待教师审核!🎉🎉🔥"
			/>
		</el-card>
		<el-card shadow="hover" header="上传实验报告" class="mt15">
			<el-form size="default" label-width="90px" :rules="rules" ref="ruleFormRef" :model="state.ruleForm">
				<el-row :gutter="35">
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" :offset="1" class="mb20">
						<el-form-item label="实验信息" prop="experiment_id">
							<el-select v-model="state.ruleForm.experiment_id" filterable placeholder="请输入实验信息" clearable>
								<el-option v-for="item in state.experimentOptions" :key="item.value" :label="item.label" :value="item.value" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" :offset="1" class="mb20">
						<el-form-item label="教师信息">
							<el-select v-model="state.ruleForm.teacher_id" filterable placeholder="请输入教师信息" clearable>
								<el-option v-for="item in state.teacherOptions" :key="item.value" :label="item.label" :value="item.value" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16" :offset="1" class="mb20">
						<el-form-item label="实验报告" prop="file">
							<el-upload
								:on-change="handleChange"
								:limit="1"
								accept=".pdf, .doc, .docx"
								style="width: 100%"
								class="upload-demo"
								drag
								action="#"
								v-model:file-list="state.ruleForm.file"
								:auto-upload="false"
								:on-exceed="handleExceed"
							>
								<el-icon class="el-icon--upload"><upload-filled /></el-icon>
								<div class="el-upload__text">拖拽文件到此处或 <em>点击上传</em></div>
								<template #tip>
									<div class="el-upload__tip">上传格式限制为.pdf,.doc,.docx</div>
								</template>
							</el-upload>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" :offset="6" class="mb20">
						<el-form-item>
							<el-button type="primary" size="default" class="file_submit_button" round @click="onSubmit">上传实验报告</el-button>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</el-card>
	</div>
</template>

<script setup lang="ts" name="fileSubmit">
import { UploadFilled } from '@element-plus/icons-vue';
import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
import { storeToRefs } from 'pinia';
import { useUserInfo } from '/@/stores/userInfo';
const stores = useUserInfo();
const { userInfos } = storeToRefs(stores);
import { experimentInfo, teacherInfo, getFile, submitFile } from '/@/api/file';
import { ElMessage } from 'element-plus';

// 引入组件
const NoticeBar = defineAsyncComponent(() => import('/@/components/noticeBar/index.vue'));

// 定义变量内容
const ruleFormRef = ref(null);
const state = reactive({
	ruleForm: {
		experiment_id: '',
		teacher_id: '',
		file: [],
	},
	experimentOptions: [{ value: '', label: '' }],
	teacherOptions: [{ value: '', label: '' }],
});
const rules = reactive({
	experiment_id: [{ required: true, message: '请选择实验信息', trigger: 'change' }],
	file: [{ required: true, message: '请上传实验报告', trigger: 'change' }],
});

const handleChange = (file: any) => {
	const reader = new FileReader();
	reader.readAsDataURL(file.raw);
	reader.onload = (e) => {
		state.ruleForm.file[0] = { name: file.name, url: e.target.result };
	};
};

const handleExceed = () => {
	ElMessage.warning('上传文件数量超出限制!');
};

const onSubmit = () => {
	ruleFormRef.value.validate((valid) => {
		if (valid) {
			getFile({ experiment_id: state.ruleForm.experiment_id, student_id: userInfos.value.Id }).then((res) => {
				if (res.code === '2000') {
					const fileInfo = {
						file_id : res.data[0].file_id,
						info: {
							file: state.ruleForm.file[0].url
						}
					};
					submitFile(fileInfo).then((result) => {
						if (result.code === '2000') {
							ElMessage.success('上传成功!');
							state.ruleForm.experiment_id = '';
							state.ruleForm.teacher_id = '';
							state.ruleForm.file = [];
							ruleFormRef.value.resetFields();
						} else {
							ElMessage.error('上传失败!');
						}
					});
				} else {
					ElMessage.error('上传失败!');
				}
			});
		} else {
			ElMessage.error('表单填写不完整!');
		}
	});
};

const getExperimentInfo = () => {
	experimentInfo(userInfos.value.lesson_id)
		.then((res) => {
			if (res.code === '2000') {
				state.experimentOptions = res.data.map((item) => {
					return {
						label: item.experiment_name,
						value: item.experiment_id,
					};
				});
			} else {
				ElMessage.error('获取实验信息失败!');
			}
		})
		.catch((err) => {
			ElMessage.error('获取实验信息失败!' + err);
		});
};

const getTeacherInfo = () => {
	teacherInfo()
		.then((res) => {
			if (res.code === '2000') {
				state.teacherOptions = res.data.map((item) => {
					return {
						label: item.teacher_name,
						value: item.teacher_id,
					};
				});
			} else {
				ElMessage.error('获取实验信息失败!');
			}
		})
		.catch((err) => {
			ElMessage.error('获取教师信息失败!' + err);
		});
};

onMounted(() => {
	getExperimentInfo();
	getTeacherInfo();
});
</script>
<style scoped lang="scss">
.file_submit_button {
	width: 300px;
	margin-top: 20px;
}
</style>